<template>
    <div class="modal-container" ref='modal'>
        <slot></slot>
    </div>
</template>

<script>
export default {
    mounted(){
        this.$refs.modal.addEventListener('touchmove', function (event) {
            if(event.target.classList.value == 'modal-container') event.preventDefault()
        }, false);
    }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.modal-container{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    overflow: hidden;
    background:rgba(0, 0, 0, 0.6)
    top: 0;
    box-sizing: border-box;
}
</style>